<template>
    <div class="layout-pd">
        <el-button type="primary" @click="saveConfig">保存</el-button>
        <el-form :model="state.configData" ref="configDataRef" :rules="rules" v-loading="state.loading" label-width="120px">
            <el-tabs>
                <el-tab-pane label="系统设置">
                    <el-form-item label="启用验证码">
                        <el-switch v-model="state.configData.sys_Captcha"></el-switch>
                    </el-form-item>
                    <el-form-item label="默认密码" prop="sys_Default_Password">
                        <el-input v-model="state.configData.sys_Default_Password"></el-input>
                    </el-form-item>
                    <el-form-item label="密码错误次数" prop="sys_password_wrong_number">
                        <el-input v-model="state.configData.sys_password_wrong_number" :min="0" ></el-input>                                              
                    </el-form-item>
                    <el-form-item prop="sys_login_delay_time">
                        <div>
                            <div class="tip">输入密码错误将用户锁定，设置0表示不启动该功能</div>
                            <el-radio-group v-model="state.configData.sys_password_wrong_strategy" prop="sys_password_wrong_strategy">
                                <el-radio :label="'LOCK_USER'">账号锁定</el-radio>
                                <el-radio :label="'LOGIN_DELAY'">延时登录</el-radio>
                            </el-radio-group>
                            <div v-if="state.configData.sys_password_wrong_strategy==='LOGIN_DELAY'" >
                            <span class="lockTime" >延迟时间</span>
                                <el-input-number v-model="state.configData.sys_login_delay_time" :min="1" :precision="0" :step="1" 
                                controls-position="right" /> 分钟
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="水印">
                        <el-switch v-model="state.configData.sys_WarterMark"></el-switch>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="文件设置">
                    <el-form-item label="文件存储类型">
                        <el-input v-model="state.configData.file_Save_Type"></el-input>
                    </el-form-item>
                    <el-form-item label="文件存储路径">
                        <el-input v-model="state.configData.file_Save_Path"></el-input>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </div>
</template>
<script setup lang="ts" name="systemConfig">
import { isInteger,CheckIsNotNullOrEmpty } from '/@/utils/util';
import { onMounted, reactive, ref } from 'vue';
import configApi from '/@/api-services/apis/system/configApi';
import { ConfigOutInput } from '/@/api-services/models/system';
import { ElMessage } from 'element-plus';

const configDataRef=ref();
const state=reactive({
    loading:false,
    configData:{} as ConfigOutInput
})

onMounted(async()=>{
    state.loading=true;
    const res=await configApi.getSystemConfig();
    state.configData=res.data.data;
    state.loading=false;
})
const saveConfig=async()=>{   
    //校验rules
    configDataRef.value.validate()
        .then(async()=>{
            const res=await configApi.updateSystemConfig(state.configData);
        })
        .catch((err:any)=>{
            ElMessage.error(err)
        }
    )
}

const loginDelayTimeValidate=(rule:any,value:any,callback:any)=>{
    if(state.configData.sys_password_wrong_strategy==='LOGIN_DELAY'){
        if(!value){
            callback(new Error('请输入延迟时间（分钟）'));
        }else if(!isInteger(value)){
            callback(new Error('请输入数字'));
        }
        else if(value>86400){
            callback(new Error('请输入小于等于86400(一天)的数字'));
        }
        else if(value<1){
            callback(new Error('请输入大于等于1的数字'));
        }
    }
    else{
        callback();
    }
}
const passwordWrongNumberValidate=(rule:any,value:any,callback:any)=>{    
    if(!CheckIsNotNullOrEmpty(value)){
        callback(new Error('请输入密码错误次数'));
    }else if(!isInteger(value)){
        callback(new Error('请输入正整数'));
    }
    else if(value>99){
        callback(new Error('请输入小于等于99的数字'));
    }
    else if(value<0){
        callback(new Error('请输入大于等于0的数字'));
    }
    else{
        callback();
    }
}
const rules=reactive({
    sys_Default_Password:[
        {required:true,message:'请输入默认密码',trigger:'blur'},
        {max:20,message:'请输入小于等于20个字符',trigger:'blur'},
        {min:4,message:'请输入大于等于4个字符',trigger:'blur'}
    ],
    sys_password_wrong_number:[
        {required:true,validator:passwordWrongNumberValidate,trigger:'blur'},
    ],
    sys_login_delay_time:[
        {validator:loginDelayTimeValidate,trigger:'blur'},
    ]
})

</script>